:root {
  /* Basiskleuren */
  --color-white: #fff;
  --color-black: #000;
  --color-grey-light: #f2f2f2;
  --color-grey-mid: #e6e6e6;
  --color-grey-dark: #cccccc;
  --color-grey-darker: #808080;
  --color-grey-bg-alt: #fafafa;
  
  /* Primair thema */
  --color-primary: #16db9f;
  --color-primary-alt: #0089ff;
  --color-primary-alt-dark:#004E92;
  
  --color-link:#0089ff;
  --color-button:#0089ff;
  --color-button-hover:#004E92;
  --color-menu-button:#0089ff;
  --color-menu-button-hover:#004E92;
  --color-menu-button-active:#16db9f;

  /* Danger / fout */
  --color-danger: #cc6665;
  --color-danger-hover: #bf403f;
  --color-danger-bg: #f8d7da;
  --color-danger-text: #721c24;

  /* Admin menu */
  --color-admin-bg: #acacac;
  --color-admin-bg-hover: #16db9f;
  --color-admin-sub: #16db9f;
  --color-admin-active: #16db9f;
  --color-admin-font: white;

  /* Badge kleuren */
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-info-bg: #d1ecf1;
  --color-info-text: #0c5460;

  /* Borders en schaduwen */
  --color-border-light: #e6e6e6;
  --color-border-mid: #cccccc;
  --color-border-modal: #ccc;
  --color-shadow-dark: rgba(0, 0, 0, 0.5);
  --color-border-price: rgba(255, 255, 255, 0.1);
 
  /* input en cards*/
  --color-input-field: white;
  --color-card: white;
}

@font-face {
    font-family: 'walsheim';
    src: url('/frenzs_fonts/gt-walsheim-light-webfont.woff2') format('woff2'),
         url('/frenzs_fonts/gt-walsheim-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'walsheim';
    src: url('/frenzs_fonts/gt-walsheim-light-oblique-webfont.woff2') format('woff2'),
         url('/frenzs_fonts/gt-walsheim-light-oblique-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: fallback;
}
@font-face {
    font-family: 'walsheim';
    src: url('/frenzs_fonts/GT-Walsheim-Medium.eot');
    src: url('/frenzs_fonts/GT-Walsheim-Medium.eot?#iefix') format('embedded-opentype'),
         url('/frenzs_fonts/GT-Walsheim-Medium.woff') format('woff'),
         url('/frenzs_fonts/GT-Walsheim-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'walsheim';
    src: url('/frenzs_fonts/GT-Walsheim-Medium-Oblique.eot');
    src: url('/frenzs_fonts/GT-Walsheim-Medium-Oblique.eot?#iefix') format('embedded-opentype'),
         url('/frenzs_fonts/GT-Walsheim-Medium-Oblique.woff') format('woff'),
         url('/frenzs_fonts/GT-Walsheim-Medium-Oblique.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: fallback;
}

/* default.css */
body {
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: 'walsheim', Helvetica, Arial, sans-serif;
}
a {
  color: var(--color-link);
}
button,
.button {
  background-color: var(--color-button);
  color: var(--color-white);
}
button:hover,
.button:hover {
  background-color: var(--color-button-hover);
}
button.secondary,
.button.secondary {
  background-color: var(--color-grey-light);
  color: var(--color-black);
}
button.secondary:hover,
.button.secondary:hover {
  background-color: var(--color-grey-mid);
}
button.danger,
.button.danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}
button.danger:hover,
.button.danger:hover {
  background-color: var(--color-danger-hover);
}
input,
textarea,
select {
  background-color: var(--color-input-field);
  color: var(--color-black);
  border: 1px solid var(--color-border-light);
  border-radius: 1em;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-grey-dark);
}
.header {
  background-color: var(--color-primary);
  box-shadow: 0 2px 5px var(--color-shadow-dark);
  color: var(--color-white);
}
.header > a {
  color: var(--color-white);
}
.footer {
  background-color: var(--color-primary);
  box-shadow: 0 -2px 5px var(--color-shadow-dark);
  color: var(--color-white);
}
.menu {
  background-color: white;
  box-shadow: 2px 0 5px var(--color-shadow-dark);
  color: var(--color-white);
}
.main {
  background-color: var(--color-white);
}
.menu > ul > li > a {
  background: var(--color-menu-button);
  color: var(--color-white);
}
.menu > ul > li > span {
  background: var(--color-primary-alt);
}
.menu > ul > li > span:hover {
  background: var(--color-primary-alt-hover);
}
.menu > ul > li > ul {
  background: var(--color-primary-alt-dark);
}
.menu > ul > li > ul > li > a {
  color: var(--color-white);
}
.menu > ul > li > ul > li > a:hover {
  color: var(--color-grey-mid);
}
.menu > ul > li > ul > li.active > a {
  border-left: 5px solid var(--color-menu-button-active);
}
.menu > ul > li.active > a {
  background: var(--color-menu-button-active);
}
.menu > ul > li.active > span {
  background: var(--color-menu-button-active);
}
.menu > ul > li:hover > a {
  background: var(--color-menu-button-active);
}
.menu > ul.admin > li > a {
  background: var(--color-admin-bg);
  color: var(--color-admin-font);
}
.menu > ul.admin > li > span {
  background: var(--color-admin-bg);
  color: var(--color-admin-font);
}
.menu > ul.admin > li > span:hover {
  background: var(--color-admin-bg-hover);
}
.menu > ul.admin > li > ul {
  background: var(--color-admin-sub);
}
.menu > ul.admin > li > ul > li > a {
  color: var(--color-admin-font);
}
.menu > ul.admin > li > ul > li > a:hover {
  color: var(--color-admin-font);
}
.menu > ul.admin > li > ul > li.active > a {
  border-left: 5px solid var(--color-admin-active);
}
.menu > ul.admin > li.active > a {
  background: var(--color-admin-active);
}
.menu > ul.admin > li.active > span {
  background: var(--color-admin-active);
}
.menu > ul.admin > li:hover > a {
  background: var(--color-admin-active);
}
.mobilemenu {
  color: var(--color-white);
}
.logout {
  color: var(--color-white);
}
@media (max-width: 768px) {
  .menu_bg {
    background: rgba(0, 0, 0, 0.1);
  }
}
.table.message .table_tr > .table_td {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}
table.overview > thead > tr > th {
  background: var(--color-grey-dark);
}
table.overview > tbody > tr:nth-child(even) > td {
  background: var(--color-grey-bg-alt);
}
table.overview > tbody > tr:hover > td {
  background: var(--color-grey-light);
}
.table.form > .table_tbody > .table_tr > .table_td.error {
  color: var(--color-danger-bg);
}
.table.form > .table_tbody > .table_tr > .table_td.message {
  color: var(--color-grey-darker);
}
.table.form > .table_tbody > .table_tr:nth-child(odd) {
  background: white
}
.badge.badge-danger,
.badge.badge-error {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.badge.badge-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.badge.badge-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}
.badge.badge-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}
.standalone {
  background: var(--color-primary);
}
.standalone > .content {
  background: var(--color-white);
}
.notification_container > .notification.danger,
.notification_container > .notification.error {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.notification_container > .notification.warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.notification_container > .notification.success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}
.notification_container > .notification.info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}
.wysiwyg-editor {
  background: var(--color-white);
}
.modal {
  background: var(--color-white);
  border: 1px solid var(--color-border-modal);
}

/* default.cards.css */
.cards > .row > .card {
  background: var(--color-card) !important;
  box-shadow: 0 8px 14px 0 rgb(0, 0, 0, .5);
  border-radius:1em !important;
}
.cards > .row > .card > .actions > a:hover {
  background: var(--color-grey-mid);
}

/* module.client_subscription.css */
.sub_overview {
  background: var(--color-grey-light);
}
.sub_overview > li > .item {
  background: var(--color-grey-mid);
}
.sub_overview > li > .item > span.info {
  background: var(--color-grey-light);
}
.product_overview {
  background: var(--color-grey-light);
}
.product_overview > li > .item {
  background: var(--color-primary);
  color: var(--color-white);
}
.product_overview > li > .item > span.price {
  border-bottom: 1px solid var(--color-border-price);
}

/* module.settings.css */
.sub_overview {
  background: var(--color-grey-light);
}
.sub_overview > li > .item {
  background: var(--color-grey-mid);
}
.sub_overview > li > .item > span.info {
  background: var(--color-grey-light);
}
.product_overview {
  background: var(--color-grey-light);
}
.product_overview > li > .item {
  background: var(--color-primary);
  color: var(--color-white);
}
.product_overview > li > .item > span.price {
  border-bottom: 1px solid var(--color-border-price);
}

/*turn off pinch-to-zoom*/
html, body {
  touch-action: manipulation; /* disables double-tap zoom/adjustment */
}

body {
    padding: env(safe-area-inset-top);
}